<template>
	<!--pages/order/order.wxml-->
	<view class="warp">
		<u-navbar
			v-if="isChoose"
		    leftText="店铺"
		    :title="rname"
		    :safeAreaInsetTop="false"
			@leftClick="getShopIfo"
		>
		    <view
		        class="u-nav-slot"
		        slot="left"
		    >
		        <u-icon
		            name="list"
		            size="19"
		        ></u-icon>
		    </view>			
		</u-navbar>
	  <view>
	  	<image :src="loginbg" style="width:100%;height:200upx"></image>
	  </view>
	  <view>
	      <view class="query">
			  <view style="width:100%;height:100%;background-color: #f1f1f1;position:absolute;z-index: 1">
				  <view style="width:100%;height:100upx;background-color: #04743a"></view>
			  </view>
			  <view style="width:100%;height:auto;position:absolute;z-index: 10;margin-top:50upx;">
				  <view class="query_num_block">
				  	<view style="width:49%;background:#ffffff;padding:20rpx 0px 0px;text-align:center">
				  		<view style="font-size:16px;color:#333;font-weight: bold;">{{dayMoney}}</view>
				  		<view style="color:#999">日收入（元）</view>
				  		<image :src="shhome1" style="width:200upx;height:180upx"></image>
				  	</view>
				  	<view style="width:49%;">
				  		<view style="display: flex;background:#ffffff;padding:20upx;">
				  			<image :src="shhome2" style="width:100upx;height:100upx"></image>
				  			<view style="text-align: center;">
				  				<view style="font-size:16px;color:#333;font-weight: bold;">{{daySumSale}}</view>
				  				<view style="color:#999">日销量（单）</view>
				  			</view>
				  		</view>
				  		<view style="display: flex;background:#ffffff;padding:20upx;margin-top:20upx">
				  			<image :src="shhome3" style="width:100upx;height:100upx"></image>
				  			<view style="text-align: center;">
				  				<view style="font-size:16px;color:#333;font-weight: bold;">{{dayBackNum}}</view>
				  				<view style="color:#999">退单量（单）</view>
				  			</view>
				  		</view>
				  	</view>
				  </view>
				  <view style="width:94%;height:auto;display:flex;justify-content: space-between;background:#ffffff;margin:20rpx auto 0px;">
					<view style="padding:10px">
						<view style="display: flex;align-items: flex-end;">
							<text class="itname">退款率</text> <text style="font-size:0.6rem;padding-left:5px">同比昨天&nbsp;{{difference}}%</text><u-icon name="download" color="#04743A" size="15"></u-icon>
						</view>
						<view style="display: flex;align-items:center;margin-top:10px;justify-content: space-between;">
							<text style="color:#04743a;font-size:1.2rem">{{todayPer}}%</text>
							<image :src="shhome4" style="width:80upx;height:80upx;"></image>
						</view>
						<view style="margin-top:10px">
							<u-line-progress :percentage="30" :showText="false"></u-line-progress>
						</view>
					</view>
					<view style="padding:10px">
						<view style="display: flex;align-items: flex-end;">
							<text class="itname">差评率</text> <text style="font-size:0.6rem;padding-left:5px">同比昨天&nbsp;{{cpdifference}}%</text><u-icon name="download" color="#04743A" size="15"></u-icon>
						</view>
						<view style="display: flex;align-items:center;margin-top:10px;justify-content: space-between;">
							<view style="color:#04743a;font-size:1.2rem">{{cptodayPer}}%</view>
							<image :src="shhome5" style="width:80upx;height:80upx"></image>
						</view>
						<view style="margin-top:10px">
							<u-line-progress :percentage="30" :showText="false"></u-line-progress>
						</view>
					</view>
				</view>
				<view style="width:94%;margin:20rpx auto 0px;">
					<view style="display: flex;justify-content: space-between;">
						<view style="width:46%;display: flex;background:#ffffff;padding:20upx 0upx 20upx 20upx;">
							<view>
								<view class="itname">周销量（单）</view>
								<view style="font-size:16px;color:#999;font-weight: 700;margin-top:10rpx">{{weekSum}}</view>
							</view>
							<image :src="shhome6" style="width:100upx;height:100upx"></image>
						</view>
						<view style="width:46%;display: flex;background:#ffffff;padding:20upx 0upx 20upx 20upx;">
							<view>
								<view class="itname">周收入（元）</view>
								<view style="font-size:16px;color:#999;font-weight: 700;margin-top:10rpx">{{weekMoney}}</view>
							</view>
							<image :src="shhome" style="width:100upx;height:100upx"></image>
						</view>
					</view>
					<view style="display: flex;justify-content: space-between;margin-top:20rpx">
						<view style="width:46%;display: flex;background:#ffffff;padding:20upx 0upx 20upx 20upx;">
							<view>
								<view class="itname">月销量（单）</view>
								<view style="font-size:16px;color:#999;font-weight: 700;margin-top:10rpx">{{monthSum}}</view>
							</view>
							<image :src="shhome8" style="width:100upx;height:100upx"></image>
						</view>
						<view style="width:46%;display: flex;background:#ffffff;padding:20upx 0upx 20upx 20upx;">
							<view>
								<view class="itname">月收入（元）</view>
								<view style="font-size:16px;color:#999;font-weight: 700;margin-top:10rpx">{{monthMoney}}</view>
							</view>
							<image :src="shhome9" style="width:100upx;height:100upx"></image>
						</view>
					</view>
				</view>
			  </view>
	      </view>
	  </view>
	   <u-picker ref="uPicker" :show="rantCate" :columns="columns"  title="餐厅" @cancel="onClose1"  @confirm="confirm"></u-picker>
	</view>
</template>
<script>
	import Config from '@/util/index.js'
	import {
		getDayMoney,backMoney,loseEval,saleSumAndMoney
	} from '@/api/report'
	import {
	 getShopIfoBytel
	} from '@/api/goods'
	export default{
		data(){
			return{
				qcode:'order',
				pname:"order",
				isChoose:true,
				rantCate:false,
				rname:'',
				shopId:'',
				userName:'',
				columns:[[]],
				shopIfo:[],
				loginbg:'',
				shhome1:'',
				shhome2:'',
				shhome3:'',
				shhome4:'',
				shhome5:'',
				shhome6:'',
				shhome7:'',
				shhome8:'',
				shhome9:'',
				dayMoney:0,
				daySumSale:0,
				dayBackNum:0,
				todayPer:0,
				difference:0,
				cptodayPer:0,
				cpdifference:0,
				weekSum:0,
				monthSum:0,
				weekMoney:0,
				monthMoney:0
			}
		},
		onLoad(){
			let today = new Date(); // 获取当前日期
			let tomorrow = new Date(today.getFullYear(), today.getMonth(), today.getDate());
			this.queryTime = this.formatDateTimeDay(tomorrow)
		},
		created(){
			this.imgpath = Config.get('apiUrl')
			this.loginbg = this.picUrl + 'loginbg.png'
			this.shhome1 = this.picUrl + 'shhome1.png'
			this.shhome2 = this.picUrl + 'shhome2.png'
			this.shhome3 = this.picUrl + 'shhome3.png'
			this.shhome4 = this.picUrl + 'shhome4.png'
			this.shhome5 = this.picUrl + 'shhome5.png'
			this.shhome6 = this.picUrl + 'shhome6.png'
			this.shhome7 = this.picUrl + 'shhome7.png'
			this.shhome8 = this.picUrl + 'shhome8.png'
			this.shhome9 = this.picUrl + 'shhome9.png'
			let _this = this
			uni.getStorage({
				key: 'userifo',
				success: function (res) {
					let depts = JSON.parse(res.data)
					_this.userName = depts.userName
					_this.getShopIfo()
				}
			})
		},
		methods:{
			onFocus(e) {
			    this.isFocus=true;
			},
			confirm(e) {
				this.rname = e.value[0]
				console.log("this.shopIfo",this.shopIfo)
				this.shopId = this.shopIfo.filter(val=>{
					return val.shopName == e.value[0]
				})[0].shopId
				this.getList();
				this.getList2();
				this.getList3();
				this.getList4();
				this.rantCate = false
				this.isChoose = true
			},
			onClose1(){
				this.rantCate = false
			},
			getShopIfo(){
				this.columns = [[]]
				let params = {
					userName:this.userName
				}
				getShopIfoBytel(params).catch(res => {
					this.shopIfo = res.data.rows
					if(this.shopIfo.length>1){
						res.data.rows.forEach(its=>{
							this.columns[0].push(its.shopName)
						})
						this.rantCate = true
					}else{
						this.rname = this.shopIfo[0].shopName
						this.shopId = this.shopIfo[0].shopId
						this.isChoose = false
						this.getList();
						this.getList2();
						this.getList3();
						this.getList4();
					}
				})
			},
			pad(num) { return num.toString().padStart(2, '0')},
			formatDateTimeDay(date) {
			  const year = date.getFullYear();
			  const month = date.getMonth() + 1;
			  const day = date.getDate();
			  return `${year}-${this.pad(month)}-${this.pad(day)}`;
			},
			getList(){
				let params = {
					shopId:this.shopId,
					queryTime:this.queryTime
				}
				getDayMoney(params).catch(res => {
					console.log("res1",res)
					if(res.data.code==200){
						this.dayMoney = res.data.moneySum
						this.daySumSale = res.data.saleNum
						this.dayBackNum = res.data.returnNum
					}
				})
			},
			getList2(){
				let params = {
					shopId:this.shopId
				}
				backMoney(params).catch(res => {
					console.log("res2",res)
					if(res.data.code==200){
						this.todayPer = res.data.todayPer
						this.difference = res.data.difference
					}
				})
			},
			getList3(){
				let params = {
					shopId:this.shopId
				}
				loseEval(params).catch(res => {
					console.log("res3",res)
					if(res.data.code==200){
						this.cptodayPer = res.data.todayPer
						this.cpdifference = res.data.difference
					}
				})
			},
			getList4(){
				let params = {
					shopId:this.shopId
				}
				saleSumAndMoney(params).catch(res => {
					console.log("res4",res)
					if(res.data.code==200){
						this.weekSum = res.data.weekList[0].returnNum
						this.weekMoney = res.data.weekList[0].saleNum
						
						this.monthSum = res.data.monthList[0].returnNum
						this.monthMoney = res.data.monthList[0].saleNum
					}
				})
			}
		}
	}
</script>

<style scoped>
	/* pages/order/order.wxss */
	.warp{background-color: #F5F5F5;}
	.itname{color:#333;font-weight: bold;}
	.query{
		width:100%;
		height:auto;
		background-color:#f2f2f2;
	}
	.query_num_block{
	  width:94%;
	  margin:0px auto;
	  display: flex;
	  justify-content: space-between;

	}
</style>
